<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:constants="http://www.tuanzi.com/constants/tags"
                template="/templates/template.xhtml">
    <ui:define name="title">产品管理</ui:define>
    <ui:define name="content">
        <h:form>

            <div class="topbar clearfix"
                 style="background: -webkit-linear-gradient(top,#f6f7f9 0,#ebedf0 100%);
                        background:-ms-linear-gradient(top,#f6f7f9 0,#ebedf0 100%)">
                <p:toolbar>
                    <f:facet name="right">
                        <f:facet name="right">
                            <p:commandButton value="编辑" process="@this" update="@form" icon="fa fa-editor" actionListener="#{receiptProductManagerBean.notShowEditor()}"
                                             rendered="#{receiptProductManagerBean.editor}"/>

                            <p:commandButton value="返回" process="@this" update="@form" icon="fa fa-editor" actionListener="#{receiptProductManagerBean.onCancel()}"
                                             rendered="#{!receiptProductManagerBean.editor}"/>
                            <p:commandButton value="保存" process="@form" update="@form" icon="fa fa-save" actionListener="#{receiptProductManagerBean.onSave()}"
                                             rendered="#{!receiptProductManagerBean.editor}"/>

                        </f:facet>
                    </f:facet>
                </p:toolbar>
            </div>

            <div class="ui-fluid" style="padding-top: 30px;">
                <div class="ui-g-12 card">
                    <div class="ui-g">
                        <div class="ui-g-12"><h3><b>产品信息</b></h3></div>
                        <div class="ui-g-2">
                            <p:outputLabel value="产品名称"/>
                            <strong style="color: red">*</strong>
                        </div>
                        <div class="ui-g-4">
                            <p:inputText value="#{receiptProductManagerBean.$.name}"
                                         disabled="#{receiptProductManagerBean.editor}"/>
                        </div>
                        <div class="ui-g-2">
                            <p:outputLabel value="产品介绍"/>
                            <strong style="color: red">*</strong>
                        </div>
                        <div class="ui-g-4">
                            <p:inputText value="#{receiptProductManagerBean.$.summary}"
                                         disabled="#{receiptProductManagerBean.editor}"/>
                        </div>
                        <div class="ui-g-2">
                            <p:outputLabel value="产品标签"/>
                            <strong style="color: red">*</strong>
                        </div>
                        <div class="ui-g-4">
                            <p:chips value="#{receiptProductManagerBean.$.labels}"
                                     disabled="#{receiptProductManagerBean.editor}"/>
                        </div>
                        <div class="ui-g-2">
                            <p:outputLabel value="最低借款金额"/>
                            <strong style="color: red">*</strong>
                        </div>
                        <div class="ui-g-4">
                            <div class="input-group">
                                <p:inputNumber value="#{receiptProductManagerBean.$.minLoan}"
                                               disabled="#{receiptProductManagerBean.editor}" decimalPlaces="0"/>
                                <span class="input-group-addon">元</span>
                            </div>
                        </div>
                        <div class="ui-g-2">
                            <p:outputLabel value="最高借款金额"/>
                            <strong style="color: red">*</strong>
                        </div>
                        <div class="ui-g-4">
                            <div class="input-group">
                                <p:inputNumber value="#{receiptProductManagerBean.$.maxLoan}"
                                               disabled="#{receiptProductManagerBean.editor}" decimalPlaces="0"/>
                                <span class="input-group-addon">元</span>
                            </div>
                        </div>
                        <div class="ui-g-2">
                            <p:outputLabel value="最低借款日利率"/>
                            <strong style="color: red">*</strong>
                        </div>
                        <div class="ui-g-4">
                            <div class="input-group">
                                <p:inputNumber value="#{receiptProductManagerBean.$.minRate}"
                                               disabled="#{receiptProductManagerBean.editor}"/>
                                <span class="input-group-addon">%</span>
                            </div>
                        </div>
                        <div class="ui-g-2">
                            <p:outputLabel value="最高借款日利率"/>
                            <strong style="color: red">*</strong>
                        </div>
                        <div class="ui-g-4">
                            <div class="input-group">
                                <p:inputNumber value="#{receiptProductManagerBean.$.maxRate}"
                                               disabled="#{receiptProductManagerBean.editor}"/>
                                <span class="input-group-addon">%</span>
                            </div>
                        </div>
                        <div class="ui-g-2">
                            <p:outputLabel value="最低借款天数"/>
                            <strong style="color: red">*</strong>
                        </div>
                        <div class="ui-g-4">
                            <div class="input-group">
                                <p:inputNumber value="#{receiptProductManagerBean.$.minTerm}"
                                               disabled="#{receiptProductManagerBean.editor}" decimalPlaces="0"/>
                                <span class="input-group-addon">天</span>
                            </div>
                        </div>
                        <div class="ui-g-2">
                            <p:outputLabel value="最高借款天数"/>
                            <strong style="color: red">*</strong>
                        </div>
                        <div class="ui-g-4">
                            <div class="input-group">
                                <p:inputNumber value="#{receiptProductManagerBean.$.maxTerm}"
                                               disabled="#{receiptProductManagerBean.editor}" decimalPlaces="0"/>
                                <span class="input-group-addon">天</span>
                            </div>
                        </div>

                        <div class="ui-g-2">
                            <p:outputLabel value="每周在线日期"/>
                            <strong style="color: red">*</strong>
                        </div>
                        <div class="ui-g-4">
                            <p:selectCheckboxMenu id="multiple" value="#{receiptProductManagerBean.$.weeks}"
                                                  label="Weeks" multiple="true"
                                                  filter="true" filterMatchMode="startsWith" panelStyle="width:250px"
                                                  disabled="#{receiptProductManagerBean.editor}">
                                <f:selectItems
                                        value="#{receiptProductManagerBean.dictionaries[DictionaryCode.WEEKS]}"
                                        var="dic"
                                        itemLabel="#{dic.name}" itemValue="#{dic.value1}"/>
                            </p:selectCheckboxMenu>
                        </div>

                        <div class="ui-g-2">
                            <p:outputLabel value="每天在线时间"/>
                            <strong style="color: red">*</strong>
                        </div>
                        <div class="ui-g-4 ui-g-nopad">
                            <div class="ui-g-12 ui-g-nopad">
                                <div class="ui-g-5">
                                    <p:calendar value="#{receiptProductManagerBean.$.limitBeginHour}" pattern="HH:mm"
                                                readonlyInput="true"
                                                timeOnly="true" disabled="#{receiptProductManagerBean.editor}"/>
                                </div>
                                <div class="ui-g-2" style="text-align: center"><span>—</span></div>
                                <div class="ui-g-5">
                                    <p:calendar value="#{receiptProductManagerBean.$.limitEndHour}" pattern="HH:mm"
                                                readonlyInput="true"
                                                timeOnly="true" disabled="#{receiptProductManagerBean.editor}"/>
                                </div>
                            </div>
                        </div>

                        <div class="ui-g-2">
                            <p:outputLabel value="营销Icon"/>
                        </div>
                        <div class="ui-g-4">
                            <p:selectOneMenu id="icon" value="#{receiptProductManagerBean.iconDictionary}"
                                             panelStyle="width:180px"
                                             converter="dictionaryConverter"
                                             effect="fade" var="dic" disabled="#{receiptProductManagerBean.editor}">

                                <f:selectItem itemLabel="请选择" itemValue=""/>
                                <f:selectItems
                                        value="#{receiptProductManagerBean.dictionaries[DictionaryCode.LOAN_RECEIPT_PRODUCT_ICON]}"
                                        var="dic" itemLabel="#{dic.name}" itemValue="#{dic}"/>

                                <p:column style="width:20%">
                                    <p:graphicImage url="#{dic.value1}" width="50" height="50"/>
                                </p:column>

                                <p:column>
                                    <h:outputText value="#{dic.name}"/>
                                </p:column>
                            </p:selectOneMenu>
                        </div>

                        <div class="ui-g-2">
                            <p:outputLabel value="上线平台"/>
                            <strong style="color: red">*</strong>
                        </div>
                        <div class="ui-g-4">
                            <p:selectOneRadio value="#{receiptProductManagerBean.$.platform}"
                                              disabled="#{receiptProductManagerBean.editor}">
                                <f:selectItem itemLabel="不限" itemValue="all"/>
                                <f:selectItem itemLabel="安卓" itemValue="android"/>
                                <f:selectItem itemLabel="苹果" itemValue="ios"/>
                            </p:selectOneRadio>
                        </div>

                        <div class="ui-g-2">
                            <p:outputLabel value="子账号订单分配模式"/>
                            <strong style="color: red">*</strong>
                        </div>
                        <div class="ui-g-4">
                            <p:selectOneRadio value="#{receiptProductManagerBean.$.orderAllotType}"
                                              disabled="#{receiptProductManagerBean.editor}">
                                <f:selectItems
                                        value="#{receiptProductManagerBean.dictionaries[DictionaryCode.RECEIPT_SUBACCOUNT_ORDER_ALLOT]}"
                                        var="allot"
                                        itemLabel="#{allot.name}" itemValue="#{allot.value1}"/>
                            </p:selectOneRadio>
                        </div>

                        <div class="ui-g-2">
                            <p:outputLabel value="产品LOGO"/>
                            <strong style="color: red">*</strong>
                        </div>
                        <div class="ui-g-4">
                            <div class="ui-g-12 ui-g-nopad">
                                <div class="ui-g-5 ui-g-nopad">
                                    <p:fileUpload fileUploadListener="#{receiptProductManagerBean.uploadLogo}"
                                                  mode="advanced"
                                                  update="logoImage"
                                                  auto="true" sizeLimit="#{constants:get('UPLOAD_FILE_SIZE')}"
                                                  allowTypes="/(\.|\/)(#{constants:get('UPLOAD_FILE_SUFFIX')})$/"
                                                  label="上传"
                                                  invalidFileMessage="不支持上传文件类型"
                                                  invalidSizeMessage="文件过大"
                                                  disabled="#{receiptProductManagerBean.editor}"/>

                                </div>

                                <div class="ui-g-2"></div>

                                <div class="ui-g-5 ui-g-nopad">
                                    <p:graphicImage id="logoImage" value="#{receiptProductManagerBean.$.logo}"
                                                    width="40px"/>
                                </div>
                            </div>
                        </div>
                    </div>

                    <p:outputPanel id="comboPanel">
                        <div class="ui-g">
                            <div class="ui-g-12"><h3><b>选择流量套餐</b></h3></div>
                            <div class="ui-g-3">
                                <p:selectOneButton value="#{receiptProductManagerBean.$.comboType}"
                                                   disabled="#{receiptProductManagerBean.editor}">
                                    <p:ajax event="change" listener="#{receiptProductManagerBean.comboChange()}"
                                            process="@this" update="comboPanel"/>
                                    <f:selectItem itemLabel="套餐一(推荐)" itemValue="1"/>
                                    <f:selectItem itemLabel="套餐二" itemValue="2"/>
                                    <f:selectItem itemLabel="套餐三" itemValue="3"/>
                                </p:selectOneButton>
                            </div>
                            <div class="ui-g-9"></div>

                            <!--套餐描述-->
                            <h:panelGrid columns="1" rendered="#{receiptProductManagerBean.$.isComboOne()}">
                                <h:outputText value="套餐一介绍："/>
                                <h:outputText value="1.提供用户个人资料 + 手机通话记录(安卓) + 手机通话记录 + 芝麻分 + 运营商授权"/>
                                <h:outputText value="2.用户过滤条件：芝麻分、用户年龄、是否实名、手机通讯录人数、地区过滤"/>
                                <h:outputText value="优点：用户申请时无需等待运营商数据爬取时间，减少用户流失"/>
                            </h:panelGrid>
                            <h:panelGrid columns="1" rendered="#{receiptProductManagerBean.$.isComboTwo()}">
                                <h:outputText value="套餐二介绍："/>
                                <h:outputText value="1.提供用户个人资料 + 运营商授权"/>
                                <h:outputText value="2.用户过滤条件：未验证的芝麻分、用户年龄、是否实名、手机认证月数"/>
                            </h:panelGrid>
                            <h:panelGrid columns="1" rendered="#{receiptProductManagerBean.$.isComboThree()}">
                                <h:outputText value="套餐三介绍："/>
                                <h:outputText value="1.提供用户个人资料 + 手机通话记录(安卓) + 手机通讯录 +芝麻分 + 运营商授权"/>
                                <h:outputText value="2.用户过滤条件：芝麻分、用户年龄、是否实名、手机通讯录人数、地区过滤，手机认证月数"/>
                            </h:panelGrid>
                        </div>

                        <div class="ui-g">
                            <div class="ui-g-12"><h3><b>每日订单量</b></h3></div>
                            <div class="ui-g-2">
                                <p:outputLabel value="单价"/>
                                <strong style="color: red">*</strong>
                            </div>
                            <div class="ui-g-4">
                                <div class="input-group">
                                    <p:inputNumber value="#{receiptProductManagerBean.$.unitPrice}"
                                                   disabled="#{!receiptProductManagerBean.showUnitPrice()}"
                                                   decimalPlaces="0"/>
                                    <span class="input-group-addon">元</span>
                                </div>
                            </div>

                            <div class="ui-g-2">
                                <p:outputLabel value="每日单量上限"/>
                                <strong style="color: red">*</strong>
                            </div>
                            <div class="ui-g-4">
                                <div class="input-group">
                                    <p:inputNumber value="#{receiptProductManagerBean.$.limitOrderOfDay}"
                                                   disabled="#{receiptProductManagerBean.editor}" decimalPlaces="0"/>
                                    <span class="input-group-addon">单</span>
                                </div>
                            </div>
                        </div>

                        <div class="ui-g">
                            <div class="ui-g-12"><h3><b>用户授权项</b></h3></div>
                            <div class="ui-g-2">
                                <p:outputLabel value="运营商授权"/>
                                <strong style="color: red">*</strong>
                            </div>
                            <div class="ui-g-4">
                                <p:inputSwitch value="#{receiptProductManagerBean.$.operationPermission}"
                                               disabled="#{receiptProductManagerBean.editor}" onLabel="是"
                                               offLabel="否"/>
                            </div>
                            <!-- 
	                            	<div class="ui-g-6">
	                                <p:outputPanel rendered="#{!receiptProductManagerBean.$.isComboTwo()}">
	                                    <div class="ui-g-2">
	                                        <p:outputLabel value="芝麻分认证"/>
	                                        <strong style="color: red">*</strong>
	                                    </div>
	                                    <div class="ui-g-4">
	                                        <p:inputSwitch value="#{receiptProductManagerBean.$.sesameAttestation}"
	                                                       disabled="#{receiptProductManagerBean.editor}" onLabel="是"
	                                                       offLabel="否"/>
	                                    </div>
	                                </p:outputPanel>
	                            </div>
                             -->
                          
                        </div>

                        <div class="ui-g" style="margin-bottom: 5%">
                            <div class="ui-g-12"><h3><b>用户过滤条件</b></h3></div>
                            <div class="ui-g-2">
                                <p:outputLabel value="最低芝麻分"/>
                                <!-- <p:outputLabel value="(已验证)" rendered="#{!receiptProductManagerBean.$.isComboTwo()}"/> -->
                                <p:outputLabel value="(不验证)" rendered="#{receiptProductManagerBean.$.isComboTwo()}"/>
                                <strong style="color: red">*</strong>
                            </div>
                            <div class="ui-g-4">
                                <div class="input-group">
                                    <p:inputNumber value="#{receiptProductManagerBean.receiptProductCondition.minSesamePoint}"
                                                   decimalPlaces="0"
                                                   disabled="#{receiptProductManagerBean.editor}"/>
                                    <span class="input-group-addon">分</span>
                                </div>
                            </div>
                            <div class="ui-g-2">
                                <p:outputLabel value="最高芝麻分"/>
                                <!-- <p:outputLabel value="(已验证)" rendered="#{!receiptProductManagerBean.$.isComboTwo()}"/> -->
                                <p:outputLabel value="(不验证)" rendered="#{receiptProductManagerBean.$.isComboTwo()}"/>
                                <strong style="color: red">*</strong>
                            </div>
                            <div class="ui-g-4">
                                <div class="input-group">
                                    <p:inputNumber value="#{receiptProductManagerBean.receiptProductCondition.maxSesamePoint}"
                                                   decimalPlaces="0"
                                                   disabled="#{receiptProductManagerBean.editor}"/>
                                    <span class="input-group-addon">分</span>
                                </div>
                            </div>
                            <div class="ui-g-2">
                                <p:outputLabel value="最低年龄"/>
                                <strong style="color: red">*</strong>
                            </div>
                            <div class="ui-g-4">
                                <div class="input-group">
                                    <p:inputNumber value="#{receiptProductManagerBean.receiptProductCondition.minAge}"
                                                   decimalPlaces="0"
                                                   disabled="#{receiptProductManagerBean.editor}"/>
                                    <span class="input-group-addon">周岁</span>
                                </div>
                            </div>
                            <div class="ui-g-2">
                                <p:outputLabel value="最高年龄"/>
                                <strong style="color: red">*</strong>
                            </div>
                            <div class="ui-g-4">
                                <div class="input-group">
                                    <p:inputNumber value="#{receiptProductManagerBean.receiptProductCondition.maxAge}"
                                                   decimalPlaces="0"
                                                   disabled="#{receiptProductManagerBean.editor}"/>
                                    <span class="input-group-addon">周岁</span>
                                </div>
                            </div>

                            <!--套餐一显示-->
                            <p:outputPanel rendered="#{receiptProductManagerBean.$.isComboOne()}">
                                <div class="ui-g-2">
                                    <p:outputLabel value="最低手机通讯录人数"/>
                                </div>
                                <div class="ui-g-4">
                                    <div class="input-group">
                                        <p:inputNumber
                                                value="#{receiptProductManagerBean.receiptProductCondition.minPhonebookCount}"
                                                decimalPlaces="0"
                                                disabled="#{receiptProductManagerBean.editor}"/>
                                        <span class="input-group-addon">人</span>
                                    </div>
                                </div>
                                <div class="ui-g-2">
                                    <p:outputLabel value="限制地区"/>
                                </div>
                                <div class="ui-g-4">
                                    <p:commandButton value="选择查看" onclick="PF('cityDlg').show()"
                                                     disabled="#{receiptProductManagerBean.editor}"/>
                                </div>
                                <div class="ui-g-2">
                                    <p:outputLabel value="实名认证"/>
                                </div>
                                <div class="ui-g-4">
                                    <p:inputSwitch value="#{receiptProductManagerBean.receiptProductCondition.realVerified}"
                                                   onLabel="是" offLabel="否"
                                                   disabled="#{receiptProductManagerBean.editor}"/>
                                </div>
                                <div class="ui-g-2">
                                    <p:outputLabel value="是否需要信用卡"/>
                                </div>
                                <div class="ui-g-4">
                                    <p:inputSwitch value="#{receiptProductManagerBean.receiptProductCondition.needCreditCard}"
                                                   onLabel="是"
                                                   offLabel="否"
                                                   disabled="#{receiptProductManagerBean.editor}"/>
                                </div>

                            </p:outputPanel>

                            <!--套餐二、三显示-->
                            <p:outputPanel rendered="#{!receiptProductManagerBean.$.isComboOne()}">
                                <div class="ui-g-2">
                                    <p:outputLabel value="最低手机认证月数"/>
                                </div>
                                <div class="ui-g-4">
                                    <div class="input-group">
                                        <p:inputNumber
                                                value="#{receiptProductManagerBean.receiptProductCondition.minPhoneVerified}"
                                                decimalPlaces="0"
                                                disabled="#{receiptProductManagerBean.editor}"/>
                                        <span class="input-group-addon">月</span>
                                    </div>
                                </div>
                                <div class="ui-g-2">
                                    <p:outputLabel value="最低手机通讯录人数"/>
                                </div>
                                <div class="ui-g-4">
                                    <div class="input-group">
                                        <p:inputNumber
                                                value="#{receiptProductManagerBean.receiptProductCondition.minPhonebookCount}"
                                                decimalPlaces="0"
                                                disabled="#{receiptProductManagerBean.editor}"/>
                                        <span class="input-group-addon">人</span>
                                    </div>
                                </div>
                                <div class="ui-g-2">
                                    <p:outputLabel value="实名认证"/>
                                </div>
                                <div class="ui-g-4">
                                    <p:inputSwitch value="#{receiptProductManagerBean.receiptProductCondition.realVerified}"
                                                   onLabel="是" offLabel="否"
                                                   disabled="#{receiptProductManagerBean.editor}"/>
                                </div>
                                <div class="ui-g-2">
                                    <p:outputLabel value="是否需要信用卡"/>
                                </div>
                                <div class="ui-g-4">
                                    <p:inputSwitch value="#{receiptProductManagerBean.receiptProductCondition.needCreditCard}"
                                                   onLabel="是"
                                                   offLabel="否"
                                                   disabled="#{receiptProductManagerBean.editor}"/>
                                </div>
                                <div class="ui-g-2">
                                    <p:outputLabel value="限制地区"/>
                                </div>
                                <div class="ui-g-4">
                                    <p:commandButton value="选择查看" onclick="PF('cityDlg').show()"
                                                     disabled="#{receiptProductManagerBean.editor}"/>
                                </div>
                            </p:outputPanel>
                        </div>
                    </p:outputPanel>

                </div>
            </div>


            <p:dialog header="选择需限制的城市" widgetVar="cityDlg" fitViewport="true" height="300px"
                      position="center" modal="true" resizable="false">
                <div class="ui-g-12">
                    <div class="ui-g-12">
                        <p:tree id="treeRegion" value="#{receiptProductManagerBean.areaRegion}" var="doc"
                                selectionMode="checkbox"
                                selection="#{receiptProductManagerBean.selectedRegionNodes}">
                            <p:treeNode icon="fa fa-paper-plane">
                                <h:outputText value="#{doc.name}"/>
                            </p:treeNode>
                        </p:tree>
                    </div>
                </div>
            </p:dialog>

        </h:form>
    </ui:define>
</ui:composition>